<template>
	<view class="recharge" >
		<view class="content">
			<view class="collection">
				<text>收款人账户</text>
				<view class="people">
					<input v-model="data.form.mobile" type="number"  maxlength="11" @input="mobileChange"  placeholder="请输入收款账户"    />
<!--				 	<text v-if="data.side.username">*{{data.side.username[data.side.username.length-1]}}</text>-->
          <text class="text_4_24">{{nickname}}</text>
				</view>
			</view>
			<view class="collection">
				<text>{{['支付密码','支付密码','交易所密码'][data.type]}}</text>
				<view class="people">
				 	<input  style="width: 100%;" v-model="data.form.password" :password="showPasswords"  placeholder="请输入密码"    />
					<uni-icons color="#F63B29" :type="!showPasswords?'eye-filled':'eye-slash-filled'" size="20"
						@click="changePasswords"></uni-icons>
					<!-- <text v-if="data.side.username">*{{data.side.username[data.side.username.length-1]}}</text> -->
				</view>
			</view>
			<view class="collMoney">
				<text class="zMOnye">转账金额</text>
				<view class="money">
					<text>￥</text>
					<input    v-model="data.form.money" placeholder="请输入转账金额" />
				</view>
			</view>
			<view class="balance">
				<text class="text">账户{{data.type == 0 ? '消费券' : '补贴券' }}：</text>
				<text class="texts">{{$toFiexd(data.money,2)}}</text>
			</view>
		</view>

		<view class="bottomMdd" @click="transfer()">
			<text>转账</text>
		</view>
	<!-- 	<view class="record" @click="$goURl('/pages/personal/wallet/balance')">
			<text>转账记录</text>
		</view> -->
		<rudon-payWithPassword :displayByParent="pluginShowing" :pwdLength="6" :amount="data.form.money" titleWindow="请输入支付密码"
			titleAmount="支付购买商品" desc=" " descColor="#333333" :needLog="true" :plaintext="false"
			@whenFullfilled="whenPwdReady" :isGEtUserInfo="false">
		</rudon-payWithPassword>
		<uni-popup ref="popup" type="center">
			<view class="popupcontent">
				<uni-icons class="closeempty" type="closeempty" size="22" @click="popup.close()"></uni-icons>
				<view class="title">
					请补全收款人姓名
				</view>
				<view class="input">
					<input v-model="data.name"  maxlength="1" placeholder="姓"  @input="handleProving"  />
					<view class="titles" v-if="data.side.username">
						*{{data.side.username[data.side.username.length-1]}}
					</view>
				</view>
				<view class="bottoms">
					<view class="btn" @click="popup.close()">
						取消
					</view>
					<view class="btns" @click="accounts()">
						确认
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow,onReachBottom} from "@dcloudio/uni-app";
	const { appContext,proxy } = getCurrentInstance();
	const data = reactive({
		userInfo:{},			//用户信息
		name:'',
		money:0,
		form:{
			money:'',
			password:'',
			mobile:'',
			code:0,
		},
		side:'',
		type:","
	})

  const nickname = ref('')
  const mobileChange = (e) => {
    const val = e.detail.value
    console.log(val,'val')
    nickname.value = ''
    if (val.length == 11) {
      proxy.$request({
        url: 'api/transfer/?mobile=' + val,
        method: 'get',
        success(res) {
          console.log(res, 'res')
          if (res.errno == 0) {
            nickname.value = res.data.nickname
          }
        }
      })
    }
  }

	let showPasswords = ref(true)
	let pluginShowing =ref(false)
	let popup =ref()
	onLoad((option)=>{
		data.type = option.code
					data.form.code = option.code

	})
	onShow(()=>{
    console.log('页面onshow')
		appContext.config.globalProperties.$userInfo({
			success(res){
				data.userInfo=res.data
				if (data.type == 0){
					data.money = data.userInfo.money
				}else{
						data.money = data.userInfo.coupon

				}
			}
		})

	})
	function open(){
		if(data.form.mobile==''){
			uni.showToast({
				icon:'none',
				title:'请输入正确的收款账户'
			})
			return
		}

		popup.value.open()

	}

	function changePasswords() {
		showPasswords.value = !showPasswords.value;
	}
	// 点击提现
	function accounts(){
		popup.value.close()
		// if(data.name+data.side.username.substring(1)!=data.side.username){
		// 	uni.showToast({
		// 		icon:'none',
		// 		title:'验证姓名错误'
		// 	})
		// 	return
		// }
		if(data.userInfo.is_pay_password==0){
			uni.showModal({
				title: '您还没有设置支付密码',
					content: '去设置支付密码?',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							appContext.config.globalProperties.$goURl('/pages/personal/password/password?code=1')
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
			})
			return
		}

		if(data.form.money==''){
			uni.showToast({
				icon:'none',
				title:'请输入正确的转账金额'
			})
			return
		}
		pluginShowing.value = true
		setTimeout(()=>{
			pluginShowing.value = false
		}, 200)
	}
	// 输入的密码
	function whenPwdReady(e){
		data.form.password = e
		transfer()
	}
	// 转账接口
	function transfer(){
		if(data.type == 2){
				appContext.config.globalProperties.$request({
					url: `api/transferExchange/`,
					method: 'POST',
					data:{
						mobile:data.form.mobile,
						money:parseFloat(data.form.money),
						password:data.form.password,
						code:Number(data.form.code)
					},
					success(res) {
						uni.showToast({
							icon:'none',
							title:res.errmsg
						})
						if(res.errno==0){
							setTimeout(()=>{
								uni.switchTab({
									url:"/pages/personal/index"
								})
							},1000)
						}
					}
				})
		}else{
			appContext.config.globalProperties.$request({
				url: `api/transfer/`,
				method: 'POST',
				data:{
					mobile:data.form.mobile,
					money:parseFloat(data.form.money),
					password:data.form.password,
					code:Number(data.form.code)
				},
				success(res) {
					uni.showToast({
						icon:'none',
						title:res.errmsg
					})
					if(res.errno==0){
						setTimeout(()=>{
							uni.switchTab({
								url:"/pages/personal/index"
							})
						},1000)
					}
				}
			})
		}

	}
	// 输入收款人账户 查询
	function handleProving(e){
		if (!(/^1[3456789]\d{9}$/).test(data.form.mobile)) {
			data.side={}
			return false;
		}
		appContext.config.globalProperties.$request({
			url: `api/transfer/?mobile=${data.form.mobile}`,
			method: 'GET',
			success(res) {
				if(res.errno==0){
					if(!res.data.username){
						uni.showToast({
							icon:'none',
							title:'对方未实名不可转账'
						})
					}
					data.side = res.data
				}else{
					// uni.showToast({
					// 	icon:'none',
					// 	title:res.errmsg
					// })
				}
			}
		})
	}
</script>

<style scoped lang="scss">
	page{
		background-color: #F3F6FD;
	}
	.recharge{
		padding: 30upx;
		.content{
			background-color: #fff;
			border-radius: 16rpx;
			overflow: hidden;

		}
		.collection{
			background-color: #fff;
			// border-top: 1px solid #dbdbdb;
			padding: 15px 0;
			text{
				font-size: 15px;
				font-weight: 700;
				color: #333333;
				margin-left: 15px;
			}
			.people{
				width: 92%;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #f5f5f5;
				padding: 15px 0;
			}
		}
		.collMoney{
			padding: 15px;
			background-color: #fff;
			margin-top: 10px;
			.zMOnye{
				font-size: 15px;
				font-weight: 700;
				color: #333333;
			}
			.money{
				display: flex;
				margin-top: 10px;
				border-bottom: 1px solid #f5f5f5;
				padding: 10px 0;
			}

		}
		.balance{
			display: flex;
			padding:0 20px 20px 20px;
			background-color: #fff;
			.text{
				font-size: 28rpx;
				color: #333;
				font-weight: 700;
			}
			.texts{
				font-size: 30rpx;
				color: #333;
				font-weight: 700;
			}
		}
		.bottomMdd{
		margin-top: 30upx;
		border-radius: 16rpx;
			text-align: center;
			background-color: #F63B29;
			padding: 10px 0;
			text{
				color: #fff;
				font-size: 30rpx;
			}
		}
		.record{
			text-align: center;
			margin-top: 30upx;
			text{
				color: #333;
				font-size: 28rpx;
			}
		}
	}
	.popupcontent{
		padding: 30upx;
		background-color: #fff;
		border-radius: 30upx;
		width: 80vw;
		position: relative;
		.closeempty{
			position: absolute;
			right: 30upx;
			top: 30upx;
		}
		.title{
			text-align: center;
		}

		.input{
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 30upx 0;
			input{
				width: 30px;
				border:1upx solid #666;
				text-align: center;
				border-radius: 10upx;
				margin: 0 10upx;
			}
			.titles{
				color: #666;
			}
		}
		.bottoms{
			display: flex;
			justify-content: space-around;
			.btn{
				color: #666;
			}
			.btns{
				color: #000;
			}
		}
	}
</style>
